<!DOCTYPE html>
<html class="no-touch">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>写文章</title>
 
  <meta name="fragment" content="!">
  <meta name="description" content="知乎专栏">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="address=no">
  
  <script src="/homeCSS/zhuanlanCSS/ga.js" async=""></script>
  <script>document.documentElement.className += ('ontouchstart' in window) ? ' touch': ' no-touch'</script>
  <link rel="stylesheet" href="/homeCSS/zhuanlanCSS/573ac0fc.css">
  <!-- <link rel="stylesheet" href="/homeCSS/bower_components/bootstrap/dist/css/bootstrap.min.css"> -->
  <meta name="baidu-site-verification" content="U9zXUx8bxm">
  <style type="text/css">
  #myform{
    width:60%;padding-left: 20%;
  }
  .btn{background-color: #5cb85c;border:0px;color:#fff;}
  </style>
  
</head>

<body class="page-write">
  
  <div id="header-holder">
    <div class="">
      <header id="header" class="navbar" ui-scroll-back-fixed="" fixed="scrollBackFixedNavbar" style="display: block;">
        <div class="navbar-logo-container">
          <a target="_blank" class="logo icon-ic_zhihu_logo" aria-label="知乎首页"></a>
        </div>

        <?php
          session_start();
          $id =  $_SESSION['id'];
        ?> 
        <div ng-transclude="" class="navbar-menu-container ui-menu-button ng-scope close" ng-class="{ true: 'open', false: 'close' }[open]" ui-menu-button="" ui-disabled="disableMenu">
          <a class="menu-item" href="/home/write/wdwz" target="_blank" tabindex="0">我的文章</a>

        </div>
       <!--  <div class="navbar-title-container clearfix show">
          <div class="titles oneline">
            <div class="main-title">写文章</div>
          </div>
        </div>
        <div class="navbar-content"></div> -->
      </header>
    </div>
  </div>
  <form action="/home/write/add" id="myform" method="post">
    {{ csrf_field() }}
  
    <div class="form-content" ui-form-linkage="">
      <input required="" class="mui-input" name="title" id="Name" placeholder="文章标题" word-max="20" max-width="330" style="width: 330px;align:center" type="text">
    </div>
<!-- ==================================================================================== -->
          <!-- 获取用户id -->
          <!-- <input type="hidden" name='id' value=""/> -->
<!--=========================================================================================  -->
  <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        
    </script><br>
    <div class="form-content">
    <div class="tag-suggestion-container" ui-tag-input="" holdertext="搜索话题" max-tags="3" suggest-options="suggestOptions">
      <ul class="tags"></ul>
      <div class="input-container" style="display:block">
        <input id="sousuo" name="topic" value="" ui-suggest=""  suggest-options="suggestOptions" class="mui-input" placeholder="搜索话题" aria-haspopup="true" autocomplete="off">
        
        <div style="opacity: 1; -moz-user-select: none; display: none;" class="ui-suggest" role="listbox" id=":0">
        </div>
      </div>
    </div>
  </div>
    <button type="submit" class="btn">上传</button>
  </form>  
    <!-- 配置文件 -->
    <script type="text/javascript" src="/homeCSS/bianjiqiCSS/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/homeCSS/bianjiqiCSS/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
    <script type="text/javascript" src="/homeCSS/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
      //绑定按键抬起事件 
    $("#sousuo").keyup(function(){
    //获取话题
    var topic = $(this).val();  
   //判断是否查询到数据
       if(topic){
        //发送ajax
           $.get('/home/write/sousuo',{topic:topic},function(data){
              //循环遍历
              for (var i = 0; i <  data.length; i++){
                //创建新的div
                var newDiv = createDiv();
                //给新建div里的span标签赋值话题
                newDiv.find('span').html(data[i].title);
                //给新建div里的span标签赋值id
                newDiv.find('span').attr('sid',data[i].id);
                //将新建div插入到元素内部
                $(".ui-suggest").append(newDiv);
                //改变元素的样式
                $(".ui-suggest").css('display','block'); 
              };
            });
        }  
  });
    //绑定键盘按下事件
    $("#sousuo").keydown(function(){
      //通过class找到子div并移除
        $(".ui-suggest").find('.row').remove(); 
    });

    //获取span的父级并绑定单击事件,
     $('.row').live('click',function(){
      //获取所有子级
      var a = $(this).children('span');
      //获取id
      var id = a.attr('sid');
      //获取话题
      var title = a.html();
      //移除被单击的div
      $('.input-container').css('display','none');
      // $(this).remove();
      //创建li标签
      var newLi = createLi();
      //通过.tag-link赋值title
      newLi.find('.tag-link').html(title);
      // //给隐藏域赋值id
      newLi.find('.aaa').val(id);
      //将创建好的li插入到指定元素的内部
      $('.tags').append(newLi);
      //给li标签中的i标签绑定单击事件
      $('.icon-ic_close').live('click',function(){
      //移除li
      $(this).parents('li').remove();
      //显示搜索框
      $('.input-container').css('display','block');
      })
    })

    //封装函数 创建span
    function createDiv()
    {
      //创建span,并绑定单击事件
      var divs = $('<div class="row " style="-moz-user-select: none;"><span sid="" class="name" style="-moz-user-select: none;"></span></div>');
                     
      //返回创建的span
      return divs;
    } 

    //封装函数创建li
    function createLi()
    {
      //创建li
      var lis = $('<li ng-repeat="tag in tags" class="ng-scope"><span class="inner-wrapper"><a sid="" class="tag-link ng-binding" href="javascript:;" target="_blank"></a><a class="remove-tag" href="javascript:;" ng-click="removeTag(tag)" title="移除"><i class="icon-ic_close"></i></a></span><input type="hidden" name="tid" class="aaa" value=""></li>');
      //返回创建的li
      return lis;
    }
    </script>
    <script type="text/javascript">
    $('.modal-dialog-title-close').click(function(){
      $('.modal-dialog').css('display','none');
    })
    </script>
</body>

</html>